<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <meta content="网贷管家，网贷记账，P2P记账-专业.直观.易用.安全的网贷记账软件，让你快速，直观的了解你的收益" name="description">
    <title>首页</title>
    <link rel="stylesheet" href="../../css/metro-bootstrap.css">
    <link rel="stylesheet" href="../../css/come.css">
</head>
<body class="metro">
    <div class="wrap stickem-container">
        <header class="">
            <div class="navigation-bar stickem">
                <div class="navigation-bar-content container-large">
                    <a class="wd_logo" href="/">
                        <img src="../../image/wd_logo.png" width="310" height="50">
                    </a>

                    <ul class="navheader">
                        <li class="current"><a href="">网贷记账</a></li>
                        <li><a href="">网贷导航</a></li>
                        <li><a href="">计算工具</a></li>
                    </ul>
                </div>
            </div>
        </header>

        <div id= "wd_content" class="container-large grid fluid show-grid">
            <div class="row">
                <div class="span2 jz_slider">
                    <div class="wd_useInfo">
                        <div class="wd_image">
                            <img src="../../image/img_default.png" width="124" height="124">
                        </div>
                        <p class="wd_name">陈国喜</p>
                    </div>
                    <nav class="sidebar">
                        <ul>
                            <li><a href="index.html"><i class="icon-home"></i>我的记账</a><a href="addLend.html" class="place-top-right">+记账</a></li>
                            <li class="active"><a href="viewAccount.html"><i class="icon-pie"></i>账户概况</a></li>
                            <!--<li><a href="viewAccount.html"><i class="icon-loop"></i>资金管理</a></li>-->
                            <li><a href="lendDetail.html"><i class="icon-chronometer"></i>投资明细</a> </li>
                            <li><a href="creditCard.html"><i class="icon-clock"></i>信用卡还款</a><a href="creditAdd.html" class="place-top-right">+创建</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="span10 padding10 panel">
                    <div class="clearfix">
                        <img class="cycle place-left" src="../../image/people.jpg" style="height: 120px;width: 120px;">
                        <div class="ebill_info place-left ml20">
                            <h2>陈国喜</h2>
                            <hr>

                            <div class="" id="hotRoller">
                                <ul  class="unstyled">
                                    <li>亲爱的陈国喜，忙碌了一上午，中午要吃饱喔~ </li>
                                    <li>亲爱的陈国喜，夜深了，早点休息噢~ </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="span7 panel_z">
                            <div class="panel_z_head">
                                <span class="cycle">赚</span>
                                <b>25650<small>.22 元</small></b>

                                <a href="" class="place-right">
                                    <i class="icon-list"></i>
                                </a>
                            </div>
                            <div class="panel-body">
                                <div id="wd_z" class="padding10">

                                </div>
                                <h6 class="fg-grayLight margin10">每月投资收益，点击柱形可以查看每天收益</h6>
                            </div>
                        </div>
                        <div class="span5 panel_q">
                            <div class="panel_t_head">
                                <span class="cycle">投</span>
                                <b>25650<small>.22 元</small></b>

                                <a href="" class="place-right">
                                    <i class="icon-list"></i>
                                </a>
                            </div>
                            <div class="panel-body">
                                <div id="wd_t" class="padding10">

                                </div>
                                <h6 class="fg-grayLight margin10">每个平台投资的比例分布</h6>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="span7 panel_t">
                            <div class="panel_q_head">
                                <span class="cycle">还</span>
                                <b>25650<small>.22 元</small></b>

                                <a href="" class="place-right">
                                    <i class="icon-list"></i>
                                </a>
                            </div>
                            <div class="panel-body">
                                <div id = "wd_q" class="padding10">

                                </div>
                                <h6 class="fg-grayLight margin10">每个平台已还款金额</h6>
                            </div>
                        </div>
                        <div class="span5 panel_y">
                            <div class="panel_y_head">
                                <span class="cycle">逾</span>
                                <b>25650<small>.22 元</small></b>

                                <a href="" class="place-right">
                                    <i class="icon-list"></i>
                                </a>
                            </div>
                            <div class="panel-body">
                                <div id="wd_y" class="padding10">

                                </div>
                                <h6 class="fg-grayLight margin10">每个平台逾期款金额</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container text-center">
            <ul class="inline">
                <li><a href="">关于我们</a></li>|
                <li><a href="">团队介绍</a></li>|
                <li><a href="">加入我们</a></li>|
                <li><a href="">联系我们</a></li>|
                <li><a href="">广告服务</a></li>|
                <li><a href="">隐私声明</a></li>|
                <li><a href="">服务条款</a></li>|
                <li><a href="">意见反馈</a></li>
            </ul>
            <p>Copyright © 2011 - 2013 www.wd568.com . All Rights Reserved.版权所有：- 深ICP备12033093号</p>
        </div>
    </footer>

    <script src="../../js/lib/sea-debug.js"></script>
    <script src="../../js/wd_common.js"></script>
    <script src="../../js/lib/jquery-1.8.3.min.js"></script>
    <script src="../../js/highcharts.js"></script>
    <script>
        var colors = Highcharts.getOptions().colors,
            categories = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            name = '收益',
            data = [{
                    y: 1000,
                    color: colors[0],
                    drilldown: {
                        type:"line",
                        name: '1月每日收益',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[0]
                    }
                }, {
                    y: 10,
                    color: colors[1],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[1]
                    }
                }, {
                    y: 3020,
                    color: colors[2],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[2]
                    }
                }, {
                    y: 210,
                    color: colors[3],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[3]
                    }
                }, {
                    y: 300,
                    color: colors[4],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[4]
                    }
                }, {
                    y: 20,
                    color: colors[5],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[5]
                    }
                }, {
                    y: 400,
                    color: colors[6],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[6]
                    }
                }, {
                    y: 850,
                    color: colors[7],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[7]
                    }
                }, {
                    y: 890,
                    color: colors[8],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[8]
                    }
                }, {
                    y: 230,
                    color: colors[9],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[9]
                    }
                }, {
                    y: 230,
                    color: colors[10],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[10]
                    }
                }, {
                    y: 120,
                    color: colors[0],
                    drilldown: {
                        type:"line",
                        name: 'MSIE versions',
                        categories: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        data: [10.85, 7.35, 33.06, 2.81, 7.35, 33.06, 12.81, 7.35, 33.06, 2.81, 27.35, 33.06, 2.81, 7.35, 33.06, 32.81, 7.35, 33.06, 2.81, 7.35, 33.06, 0.00, 47.35, 33.06, 232.81, 47.35, 33.06, 232.81, 47.35, 33.06],
                        color: colors[0]
                    }
                }];

        function setChart(name, categories, data, color,type) {
                chart.xAxis[0].setCategories(categories, false);
                chart.series[0].remove(false);
                chart.addSeries({
                    type: type,
                    name: name,
                    data: data,
                    color: color || 'white'
                }, false);
                chart.redraw();
            }

        var chart = $('#wd_z').highcharts({
            chart: {
                type: 'column'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            title:{
                text:''
            },
            plotOptions: {
                line:{
                    cursor: 'pointer',
                    events: {
                        click: function() {
                            var drilldown = this.drilldown;
                            if (drilldown) { // drill down
                                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type);
                            } else { // restore
                                setChart(name, categories, data,'column');
                            }
                        }
                    }
                },
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type);
                                } else { // restore
                                    setChart(name, categories, data,'column');
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y;
                        }
                    }
                }
            },

            legend: {
                backgroundColor: 'white',
                verticalAlign: 'bottom',
                borderWidth: 0,
                borderRadius: 0
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                            s = this.x +':收益<b>'+ this.y +'元</b><br>';
                    if (point.drilldown) {
                        s += '点击 '+ point.category +' 查看收益详情';
                    } else {
                        s += '点击返回';
                    }
                    return s;
                }
            },
            credits:{
                enabled:false
            },
            series: [{
                name: name,
                data: data
            }],
            exporting: {
                enabled: false
            }
        }).highcharts();

        $("#wd_t").highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            legend: {
                backgroundColor: 'white',
                verticalAlign: 'bottom',
                borderWidth: 0,
                borderRadius: 0
            },
            credits:{
                enabled:false
            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '投资占比',
                data: [
                    ['微金互助',1262.00],
                    ['有利网',1526.80],
                    ['红玲创投',218.50],
                    ['360融',20.22]
                ]
            }]
        });
        $('#wd_y').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: ['微金互助','有利网','红玲创投','人人贷','360融']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                legend: {
                    backgroundColor: 'white',
                    verticalAlign: 'bottom',
                    borderWidth: 0,
                    borderRadius: 0
                },
                credits:{
                    enabled:false
                },

                series: [{
                    name: '逾期',
                    color:"#937342",
                    data: [49.9, 71.5, 106.4, 129.2]

                }]
            });

        $('#wd_q').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['微金互助','有利网','红玲创投','人人贷','360融']
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            legend: {
                backgroundColor: 'white',
                verticalAlign: 'bottom',
                borderWidth: 0,
                borderRadius: 0
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br>',
                shared: true
            },
            credits:{
                enabled:false
            },
            plotOptions: {
                column: {
                    stacking: 'percent'
                }
            },
            series: [
                {
                    name:"已还款",
                    data: [100, 300, 300,300,2136]
                }, {
                    name:"待还款",
                    data: [200, 900, 402, 203,21236]
                }
            ]
        })
    </script>
</body>
</html>